<template>
  <div>
    <el-form
      ref="reform"
      v-loading="loading"
      :model="ruleForm"
      status-icon
      :rules="rules"
      :size="size"
      label-width="90px"
      :show-message="false"
      element-loading-background="rgba(255, 255, 255, 0.8)"
      element-loading-text="数据正在加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="用户名称" prop="name">
            <el-input v-model.trim="ruleForm.name" placeholder="请输入用户名称" type="text" show-word-limit autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="mobile">
            <el-input
              v-model.trim="ruleForm.mobile"
              placeholder="请输入手机号码"
              type="number"
              show-word-limit
              autocomplete="off"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户邮箱" prop="email">
            <el-input
              v-model.trim="ruleForm.email"
              placeholder="请输入用户邮箱"
              show-word-limit
              autocomplete="off"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio
                v-for="(item, index) in sexList"
                :key="index"
                :label="Number(item.code)"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span class="dialog-footer">
      <el-button v-throttle :size="size" :loading="loading" type="primary" @click="submitForm">保存</el-button>
      <el-button v-throttle :size="size" :loading="loading" @click="resetForm">重置</el-button>
    </span>
  </div>
</template>
<script>
import { edit } from '@/api/system/user'
export default {
  props: {
    user: {
      type: Object,
      default: () => null
    },
    sexList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 加载开关
      loading: false,
      // 表单对象
      ruleForm: {
        sex: 0
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
        ]
      }
    }
  },
  computed: {
    // 布局大小
    size() {
      return this.$store.state.app.size
    }
  },
  created() {
    this.ruleForm = this.user ? {
      ...this.user,
      isStatusChange: true,
      roleIds: this.user.roles ? this.user.roles.map(item => { return item.id }) : [],
      postIds: this.user.posts ? this.user.posts.map(item => { return item.id }) : []
    } : this.ruleForm
  },
  methods: {
    // 保存
    submitForm() {
      this.$refs['reform'].validate((valid, obj) => {
        if (valid) {
          this.loading = true
          edit(this.ruleForm).then(res => {
            this.$message.success('保存成功！')
            this.$store.dispatch('user/getInfo', true).finally(() => {
              this.loading = false
            })
          }).catch(() => {
            this.loading = false
          })
        } else {
          const field = []
          for (const key in obj) {
            field.push(obj[key][0].message)
          }
          this.$message.error(field[0])
          return false
        }
      })
    },
    // 重置
    resetForm() {
      this.ruleForm = { sex: 0 }
      this.$refs.reform.resetFields()
    }
  }
}
</script>
